<template>
  <div>
    <div class="flex items-center justify-start mb-5" v-if="showBtn">
      <el-button type="primary" @click="onAdd">
        <svg-icon icon-class="add" class="mr-2"></svg-icon>
        新增屏障
      </el-button>
      <el-button type="danger" plain @click="onBatchDelete" :disabled="delBtnDisabled">
        <svg-icon icon-class="delete" class="mr-2"></svg-icon>
        删除屏障
      </el-button>
    </div>
    <el-card shadow="never" class="rounded-lg">
      <div class="flex flex-col items-center w-full h-[40vh]" v-loading="queryLoading">
        <div v-for="(item, index) in tableData" :key="index" class="w-full">
          <div class="flex items-center justify-start">
            <div class="mr-5"><el-checkbox v-model="item.check"></el-checkbox></div>
            <div class="mr-10">{{ index + 1 }}</div>
            <div class="mr-10">
              <el-button type="primary">初始事件/后果</el-button>
            </div>
            <div v-for="(bItem, bIndex) in item.barrierList" :key="`${index + bIndex}`" class="mr-10">
              <el-button>{{ bItem }}</el-button>
            </div>
          </div>
          <el-divider />
        </div>
      </div>
    </el-card>

    <el-dialog v-model="dialogVisible" title="新增屏障" width="800">
      <el-form :model="infoForm" :rules="rules" label-position="top">
        <el-row :gutter="12" align="bottom">
          <el-col :span="8">
            <el-form-item label="屏障名称" prop="barrierName">
              <el-input v-model="infoForm.barrierName" placeholder="请输入屏障名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="屏障类型" prop="barrierType">
              <el-input v-model="infoForm.barrierType" placeholder="请输入屏障类型" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="屏障标签" prop="barrierTag">
              <el-input v-model="infoForm.barrierTag" placeholder="请输入屏障标签" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="类别" prop="type">
              <el-select v-model="infoForm.type" placeholder="请选择类别" clearable>
                <el-option v-for="c in typeOptions" :key="c" :label="c" :value="c" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="原因/后果描述" prop="reason">
              <el-input v-model="infoForm.reason" placeholder="请输入原因/后果描述" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="退化因素" prop="degradationFactors">
              <el-select v-model="infoForm.degradationFactors" placeholder="请选择退化因素" clearable>
                <el-option v-for="c in degradationFactorsOptions" :key="c" :label="c" :value="c" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="退化类型" prop="degradationType">
              <el-select v-model="infoForm.degradationType" placeholder="请选择退化类型" clearable>
                <el-option v-for="c in degradationTypeOptions" :key="c" :label="c" :value="c" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="退化因素屏障" prop="degradationFactorBarrier">
              <el-select v-model="infoForm.degradationFactorBarrier" placeholder="请选择退化因素屏障" clearable>
                <el-option v-for="c in degradationFactorBarrierOptions" :key="c" :label="c" :value="c" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="屏障PFD" prop="barrierPFD">
              <el-select v-model="infoForm.barrierPFD" placeholder="请选择屏障PFD" clearable>
                <el-option v-for="c in barrierPFDOptions" :key="c" :label="c" :value="c" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="残余风险" prop="residualRisk">
              <el-select v-model="infoForm.residualRisk" placeholder="请选择残余风险" clearable>
                <el-option v-for="c in residualRiskOptions" :key="c" :label="c" :value="c" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="关联数据" prop="linkedData">
              <el-select v-model="infoForm.linkedData" placeholder="请选择关联数据" clearable>
                <el-option v-for="c in linkedDataOptions" :key="c" :label="c" :value="c" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <div class="flex items-center justify-start">
              <div class="mr-5">屏障是否可用</div>
              <div>
                <el-radio-group v-model="infoForm.available">
                  <el-radio :value="true">是</el-radio>
                  <el-radio :value="false">否</el-radio>
                </el-radio-group>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-card shadow="never" class="rounded-lg">
          <el-table :data="associationTableData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column label="序号" type="index" width="80" align="center" />
            <el-table-column prop="riskType" label="关联一级数据" min-width="180" align="center" show-overflow-tooltip />
            <el-table-column prop="riskCode" label="关联二级数据" min-width="180" show-overflow-tooltip />
            <el-table-column prop="device" label="是否使能" min-width="100" align="center" show-overflow-tooltip />
            <el-table-column label="操作" width="120" align="center">
              <template #default="{ row }">
                <el-button link type="danger" @click="onDelete(row)">
                  <svg-icon icon-class="delete"></svg-icon>
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-form>
      <template #footer>
        <div class="flex items-center justify-center">
          <el-button @click="onCloseDialog">
            <svg-icon icon-class="return" class="mr-2"></svg-icon>
            关闭
          </el-button>
          <el-button type="primary" @click="onSaveInfoForm">
            <svg-icon icon-class="save" class="mr-2"></svg-icon>
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, onMounted } from 'vue';
import { Search } from '@element-plus/icons-vue';

const props = withDefaults(
  defineProps<{
    showBtn: boolean;
  }>(),
  {
    showBtn: true
  }
);

interface BarrierInfoForm {
  id?: number;
  // 屏障名称
  barrierName: string;
  // 屏障类型
  barrierType: string;
  // 屏障标签
  barrierTag: string;
  // 类别
  type: string;
  // 原因/后果描述
  reason: string;
  // 退化因素
  degradationFactors: string;
  // 退化类型
  degradationType: string;
  // 退化因素屏障
  degradationFactorBarrier: string;
  // 屏障PFD
  barrierPFD: string;
  // 残余风险
  residualRisk: string;
  // 关联数据
  linkedData: string;
  // 屏障是否可用
  available: boolean;
}

interface BarrierRow {
  id: number;
  check: boolean;
  barrierList: string[];
}

const DEFAULT_FORM: BarrierInfoForm = {
  id: undefined,
  // 屏障名称
  barrierName: '',
  // 屏障类型
  barrierType: '',
  // 屏障标签
  barrierTag: '',
  // 类别
  type: '',
  // 原因/后果描述
  reason: '',
  // 退化因素
  degradationFactors: '',
  // 退化类型
  degradationType: '',
  // 退化因素屏障
  degradationFactorBarrier: '',
  // 屏障PFD
  barrierPFD: '',
  // 残余风险
  residualRisk: '',
  // 关联数据
  linkedData: '',
  // 屏障是否可用
  available: false
};

const typeOptions = ['类别1', '类别2', '类别3'];
const degradationFactorsOptions = ['因素1', '因素2', '因素3'];
const degradationTypeOptions = ['类别1', '类别2', '类别3'];
const degradationFactorBarrierOptions = ['因素1', '因素2', '因素3'];
const barrierPFDOptions = ['1', '2', '3'];
const residualRiskOptions = ['风险1', '风险2', '风险3'];
const linkedDataOptions = ['数据1', '数据2', '数据3'];

// 表单信息
const infoForm = ref<BarrierInfoForm>({ ...DEFAULT_FORM });

// 表单校验
const rules = ref({
  barrierName: [{ required: true, message: '请输入屏障名称', trigger: 'blur' }],
  barrierType: [{ required: true, message: '请输入屏障类型', trigger: 'blur' }],
  barrierTag: [{ required: true, message: '请输入屏障标签', trigger: 'blur' }],
  type: [{ required: true, message: '请选择类别', trigger: 'blur' }]
});

const queryLoading = ref(false);
const tableData = ref<BarrierRow[]>([]);

const dialogVisible = ref(false);

const delBtnDisabled = computed(() => {
  return !tableData.value.some((item) => item.check === true);
});

// 模拟数据
const allRecords = ref<BarrierRow[]>([
  {
    id: 101,
    check: false,
    barrierList: ['屏障名称', '屏障名称', '屏障名称', '屏障名称', '屏障名称']
  },
  {
    id: 102,
    check: false,
    barrierList: ['屏障名称', '屏障名称', '屏障名称', '屏障名称', '屏障名称']
  }
]);

const onBatchDelete = () => {
  ElMessageBox.confirm('确认删除该记录？', '提示', { type: 'warning' }).then(() => {
    allRecords.value = allRecords.value.filter((r) => r.check === true);
    handleQuery();
    ElMessage.success('删除成功');
  });
};

const onAdd = () => {
  dialogVisible.value = true;
};

const onCloseDialog = () => {
  dialogVisible.value = false;
};
const onSaveInfoForm = () => {
  dialogVisible.value = false;
};

const getFilteredRecords = () => {
  tableData.value = allRecords.value;
};

const handleQuery = () => {
  queryLoading.value = true;
  setTimeout(() => {
    getFilteredRecords();
    queryLoading.value = false;
  }, 200);
};

const associationTableData = ref([]);
const handleSelectionChange = () => {};
const onDelete = (row?: BarrierRow) => {
  ElMessageBox.confirm('确认删除该记录？', '提示', { type: 'warning' }).then(() => {
    allRecords.value = allRecords.value.filter((r) => r.id !== row.id);
    handleQuery();
    ElMessage.success('删除成功');
  });
};

onMounted(() => {
  handleQuery();
});
</script>

<style scoped lang="scss"></style>
